<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
      xmlns:sec="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div th:fragment="fileUpload">
        <script>
            function fileUploadInit(){
                //上传 --定义上传框 fileinput 方法
                $('#file-pic').fileinput({     //(3)fileinput方法
                    //初始化上传文件框
                    language: "zh",//配置语言
                    showUpload : false, //显示整体上传的按钮
                    showRemove : true,//显示整体删除的按钮
                    uploadAsync: true,//默认异步上传
                    uploadLabel: "上传",//设置整体上传按钮的汉字
                    removeLabel: "移除",//设置整体删除按钮的汉字
                    uploadClass: "btn btn-primary",//设置上传按钮样式
                    showCaption: true,//是否显示标题
                    dropZoneEnabled: false,//是否显示拖拽区域

                    uploadUrl: ctxPath + '/System/User/uploadHead', //这是文件上传的地址。

                    maxFileSize : 9999,    //文件大小限制
                    maxFileCount: 9999,    //允许最大上传数，可以多个，
                    enctype: 'multipart/form-data',
                    allowedFileExtensions : ["jpg", "png","gif","docx","zip","xlsx","txt"], /*上传文件格式*/
                    msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
                    showBrowse: true,
                    browseOnZoneClick: true,
                    slugCallback : function(filename) {
                        return filename.replace('(', '_').replace(']', '_');
                    },
                    //(5)把参数提交到后台，后台接收
                    uploadExtraData: function(previewId, index) {   //额外参数的关键点
                        //后台根据返回的 [userId] 更新头像
                        return { id: userId };
                    }
                });

                //(6)上传完之后  进入 fileuploaded 方法   获取后台响应信息 data
                $('#file-pic').on( "fileuploaded",
                    function( event, data, previewId, index ) {
                        var resp = data.response;
                        if( resp.result=='success' ){ //上传成功
                            confirmOK('上传成功');
                        }else{                        //上传失败
                            confirmFail('上传成功');
                        }
                });   //文件上传 [ END ]

            }   //fileUploadInit() [ END ]
        </script>
    </div>


</body>
</html>
